পার্টিকেল সিস্টেম (Particle System) হল এমন একটি উপাদান যা আপনাকে বিভিন্ন প্রাকৃতিক ঘটনা যেমন আগুন, ধোঁয়া, বৃষ্টি, কিংবা রেনবো তৈরি করতে সহায়তা করে। BabylonJS-এ পার্টিকেল সিস্টেমের মাধ্যমে আপনি সহজেই লাইফসাইকেল এবং এনিমেশন সহ পার্টিকেলগুলির আচরণ নিয়ন্ত্রণ করতে পারেন। এখানে আমরা পার্টিকেল সিস্টেমে টেক্সচার যোগ করা এবং এনিমেশন পরিচালনা সম্পর্কে আলোচনা করব।
পার্টিকেল সিস্টেমে টেক্সচার যোগ করা
পার্টিকেল সিস্টেমে সাধারণত ছোট ছোট অবজেক্ট যেমন বস্তুকণা (particles) ব্যবহার করা হয় যা একে অন্যের সাথে সম্পর্কিত থাকে এবং একত্রে একটি মহাকাব্যিক দৃশ্য তৈরি করে। টেক্সচার ব্যবহার করলে পার্টিকেলগুলোর আকৃতি এবং চেহারা কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, আপনি একটি আগুনের পার্টিকেল সিস্টেম তৈরি করতে পারেন যেখানে প্রতিটি পার্টিকেল একটি আগুনের টেক্সচার নিয়ে চলবে।
উদাহরণ: পার্টিকেল সিস্টেমে টেক্সচার ব্যবহার
// Canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);
// দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলো তৈরি করা
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// পার্টিকেল সিস্টেম তৈরি করা
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
// পার্টিকেল সিস্টেমের টেক্সচার সেট করা
particleSystem.particleTexture = new BABYLON.Texture("path_to_particle_texture.png", scene);
// পার্টিকেল সিস্টেমের প্রপার্টি সেট করা
particleSystem.emitter = BABYLON.Vector3.Zero(); // উদগীরণ পয়েন্ট
particleSystem.start(); // পার্টিকেল সিস্টেম শুরু করা
// দৃশ্যে এনিমেশন শুরু করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
কোডের ব্যাখ্যা:
particleTexture: পার্টিকেল সিস্টেমের প্রতিটি পার্টিকেলের জন্য একটি টেক্সচার নির্ধারণ করা হয়েছে। এটি একটি ইমেজ ফাইল (যেমন PNG বা JPG) হতে পারে।emitter: এখানেVector3.Zero()ব্যবহার করা হয়েছে, মানে পার্টিকেলগুলি নির্দিষ্ট এক পয়েন্ট থেকে উদগীরিত হবে (এখানেVector3.Zero()মানে (0, 0, 0) পয়েন্ট)।start(): পার্টিকেল সিস্টেমের এনিমেশন শুরু করার জন্য এই ফাংশনটি কল করা হয়েছে।
পার্টিকেল সিস্টেমে এনিমেশন
পার্টিকেল সিস্টেমের মাধ্যমে আপনি পার্টিকেলের গতিবিধি, আকার এবং অন্যান্য বৈশিষ্ট্য নিয়ন্ত্রণ করতে পারবেন। আপনি এনিমেশন ব্যবহার করে পার্টিকেলগুলোর আচরণ আরও গতিশীল এবং বাস্তবসম্মত করে তুলতে পারেন, যেমন তাদের গতি, আকার, রঙ বা টেক্সচার পরিবর্তন করতে।
উদাহরণ: পার্টিকেল সিস্টেমে এনিমেশন যোগ করা
// Canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);
// দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলো তৈরি করা
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// পার্টিকেল সিস্টেম তৈরি করা
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
// পার্টিকেল সিস্টেমের টেক্সচার সেট করা
particleSystem.particleTexture = new BABYLON.Texture("path_to_particle_texture.png", scene);
// পার্টিকেল সিস্টেমের প্রপার্টি সেট করা
particleSystem.emitter = BABYLON.Vector3.Zero();
particleSystem.minEmitPower = 0.5; // কম শক্তি
particleSystem.maxEmitPower = 1.5; // বেশি শক্তি
particleSystem.emitRate = 500; // প্রতি সেকেন্ডে 500 পার্টিকেল
// এনিমেশন সেট করা
var animation = new BABYLON.Animation("scaleAnimation", "scale.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
// এনিমেশনের কীগুলি সেট করা
var keys = [];
keys.push({ frame: 0, value: 1 }); // প্রথমে পার্টিকেল আকার 1
keys.push({ frame: 50, value: 2 }); // 50 ফ্রেম পর আকার 2
keys.push({ frame: 100, value: 1 }); // আবার 1 হয়ে যাবে
animation.setKeys(keys);
// পার্টিকেলে এনিমেশন অ্যাপ্লাই করা
particleSystem.animations.push(animation);
// পার্টিকেল সিস্টেম শুরু করা
particleSystem.start();
// দৃশ্যে এনিমেশন শুরু করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
কোডের ব্যাখ্যা:
animation: এখানেscale.xএনিমেশন তৈরি করা হয়েছে, যার মাধ্যমে পার্টিকেলের আকার পরিবর্তিত হবে।keys.push(): এনিমেশনের জন্য কীগুলি নির্ধারণ করা হয়েছে। প্রথমে আকার 1, পরে 50 ফ্রেম পর আকার 2, এবং আবার 100 ফ্রেম পর আকার 1 হবে।animations.push(): তৈরি করা এনিমেশনটি পার্টিকেল সিস্টেমে অ্যাপ্লাই করা হয়েছে।
পার্টিকেল সিস্টেমে আরও কিছু এনিমেশন বৈশিষ্ট্য
১. স্পিড এনিমেশন
পার্টিকেলগুলির গতি পরিবর্তন করতে আপনি speed বা velocity এনিমেশন ব্যবহার করতে পারেন।
particleSystem.startDirection = BABYLON.Vector3.Forward(); // স্টার্ট ডিরেকশন
particleSystem.minLifeTime = 1; // মিনিমাম লাইফটাইম
particleSystem.maxLifeTime = 2; // ম্যাক্সিমাম লাইফটাইম
২. রঙের এনিমেশন
পার্টিকেলগুলির রঙ পরিবর্তন করার জন্য আপনি color প্রপার্টি ব্যবহার করতে পারেন।
particleSystem.color1 = new BABYLON.Color4(1, 0, 0, 1); // প্রথম রঙ (লাল)
particleSystem.color2 = new BABYLON.Color4(0, 1, 0, 1); // দ্বিতীয় রঙ (সবুজ)
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0, 1); // মৃত রঙ (কালো)
সারাংশ
BabylonJS-এ পার্টিকেল সিস্টেম ব্যবহার করে আপনি সহজেই বাস্তবসম্মত 3D দৃশ্য তৈরি করতে পারেন, যেখানে পার্টিকেলগুলির টেক্সচার এবং এনিমেশন দিয়ে আপনি আরও জটিল এবং আকর্ষণীয় দৃশ্য তৈরি করতে পারেন। টেক্সচার দিয়ে পার্টিকেলের চেহারা কাস্টমাইজ করা যায় এবং এনিমেশন ব্যবহার করে তাদের গতিবিধি, আকার, রঙ বা স্পিড পরিবর্তন করা যায়। এর মাধ্যমে আপনি আগুন, ধোঁয়া, বৃষ্টি, বা অন্য যেকোনো প্রাকৃতিক দৃশ্য তৈরি করতে পারবেন।
Read more
